import { useRequestHandle } from '@/utils/utils';
import { Steps, Card, Badge } from 'antd';
import { useMatch } from 'umi';
import { getById, getHealthy } from './service';
import { useEffect, useState } from 'react';
import { useUpdateEffect } from '@umijs/hooks';
import { Space } from 'antd';
import Backup from "./components/Backup";
import MakePack from "./components/MakePack";


export default () => {
  const match = useMatch('/system/developer/applications/publish/:id');
  const id = match?.params.id;
  const [serverConfig, setServerConfig] = useState({});
  const [healthy, setHealthy] = useState(false);
  const [backupPath, setBackupPath] = useState("");
  const [current, setCurrent] = useState(0);
  const getHealthyRequest = useRequestHandle(getHealthy, () => {
    setHealthy(true);
  });
  const getHealthyCheck = () => {
    if (getHealthyRequest.loading) {
      return <Badge status="processing" text="检查中" />
    }
    if (healthy) {
      return <Badge status="success" text="服务器在线" />
    }
    return <Badge status="error" text="服务器离线" />
  }
  useEffect(() => {
    async function init() {
      const response = await getById({ id });
      if (response && response.success) {
        setServerConfig(response.data);
      }
    }
    init();
  }, [id])
  useUpdateEffect(() => {
    if (serverConfig.id) {
      getHealthyRequest.run({ id: serverConfig.agentServerId });
    }
  }, [serverConfig])
  return (
    <>
      <Card title={<Space >
        {serverConfig.agentServer?.serverName}
        {serverConfig.serverName}
        {getHealthyCheck()}
        {backupPath}
      </Space>}>

        <Steps
          style={{ width: "100%" }}
          current={current}

          items={[
            {
              title: '备份',
            },
            {
              title: '上传发布文件',
            },
            {
              title: '执行',
            },
          ]}
        />
        <div style={{ marginTop: "10px" }}>
          {current === 0 ? <Backup onBackup={(path) => {
            setBackupPath(path);
            setCurrent(1);
          }} record={serverConfig} /> : null}

          {current === 1 ? <MakePack onBackup={(path) => {
            setBackupPath(path);
            setCurrent(2);
          }} record={serverConfig} /> : null}


        </div>
      </Card>
    </>
  );
};
